import logo from '@/assets/30.jpg';
import '@/componets/dacuang/DachuangCard.scss';
import { EyeOutlined, LikeFilled, LikeOutlined, ShareAltOutlined } from '@ant-design/icons';
import axios from 'axios';
import React, { useState } from 'react';
import { useNavigate } from 'react-router-dom';

interface ProjectCardProps {
  app: {
    title: string;
    description: string;
    image: string;
    tags: string[];
    likes: number;
    views: number;
    shares: number;
    projectId: number;
    likeTrue: boolean;
  };
}

const DachuangCard: React.FC<ProjectCardProps> = ({ app }) => {
  const [liked, setLiked] = useState(app.likeTrue);
  const [collected, setCollected] = useState(false);
  const [view, setView] = useState<number>(app.views);
  const [share, setShare] = useState <number>(app.shares);
  const [like, setLike]= useState <number>(app.likes);
  const navigate = useNavigate();

  const handleMoreInfo = () => {
    navigate(`/dachuang/xiangqing`); // 替换为你的目标路径
    axios.post('http://localhost:8080/api/innovationPlaza/project/clickProject', null, {
      params: { projectId: app.projectId }
    })
    .then(response =>{
      console.log(response.data);
      if (response.data.msg === "点击量+1" ){
        setView(prev => prev + 1);
      }else{
        console.error('error views', response.data.msg);
      }
    })
    .catch(error => {
      console.error('error views loading', error);
    });
  };
  
  const handleShare = () =>{
    axios.post('http://localhost:8080/api/innovationPlaza/project/shareProject', null, {
      params: { projectId: app.projectId }
    })
    .then(response =>{
      console.log(response.data);
      if (response.data.msg === "分享量+1" ){
        setShare(prev => prev + 1);
        setCollected(!collected)
      }else{
        console.error('error views', response.data.msg);
      }
    })
    .catch(error => {
      console.error('error views loading', error);
    });
  };
  const handlelike = () =>{
    axios.post('http://localhost:8080/api/innovationPlaza/project/toggleLike', null, {
      params: { 
        projectId: app.projectId,
        userId: 1
      }
    })
    .then(response =>{
      console.log(response.data);
      if (response.data.msg === "成功点赞" ){
        setLike(prev => prev + 1);
        setLiked(!liked)
      }
      else{
        if( like === 0){
          setLike(0);
        }
        else{
          setLike(prev => prev - 1);
          setLiked(!liked)
        }
      }
    })
    .catch(error => {
      console.error('error views loading', error);
    });
  };
 
  return (
    <div className="project-card">
      <div className="card-header">
        <h3>{app.title}</h3>
        <div className="tags">
          {app.tags.map((tag, index) => (
            <span key={index}>{tag}</span>
          ))}
        </div>
      </div>
      <div className="card-bottom">
        <img src={app.image || logo} alt={app.title} />
        <div className="card-details">
          <p className="description">{app.description}</p>
          <div className="actions">
            <div className="action-icons">
              <span onClick={handlelike} style={{ display: 'inline-flex', alignItems: 'center', marginRight: '1.875rem', color: '#81838f', fontSize: '1.125rem' }}>
                {liked ? <LikeFilled style={{ color: 'red', fontSize: '1.125rem', marginRight: '0.5rem' }} /> : <LikeOutlined style={{ fontSize: '1.125rem', marginRight: '0.5rem' }} />} {like}
              </span>
              <span style={{ display: 'inline-flex', alignItems: 'center', color: '#81838f', fontSize: '1.125rem', marginRight: '1.875rem' }}>
                <EyeOutlined style={{ fontSize: '1.125rem', marginRight: '0.5rem' }} /> {view}
              </span>
              <span onClick={handleShare} style={{ display: 'inline-flex', alignItems: 'center', color: '#81838f', fontSize: '1.125rem' }}>
                <ShareAltOutlined style={{ fontSize: '1.125rem', marginRight: '0.5rem' }} /> {share}
              </span>
            </div>
            <button className="more-info-button" onClick={handleMoreInfo}>了解更多</button>
          </div>
        </div>
      </div>
    </div>
  );
};

export default DachuangCard;
